<!--
 * @Description: 附言区域
-->
<template>
  <div class="postscript-area comment-component postscript" v-watermark>
    <a-spin :spinning="spinning">
      <div class="comment-list" item-layout="horizontal">
        <div class="comment-header"
          >{{ $i18n('collaboration.sender.postscript') }}
          <span
            class="primary-link-btn"
            v-if="!data && baseInfo.businessData.summary.canReply"
            @click="isShowTextareaComment = true"
            >{{ $i18n('collaboration.sender.newpostscript') }}</span
          ></div
        >
        <ul>
          <li v-for="item in dataList" :key="item.id">
            <div
              ><span v-if="data" class="author-base-info" @click="showBaseInfo(item.createId)">{{
                item.createName
              }}</span
              ><span v-if="item.canView" v-html="item.escapedContent"></span>
              <span v-else>[{{ $i18n('common.display.hidden.label') }}]</span>

              <AccessoryList
                :attachments="item.attFileDomain"
                :relationDocs="item.assDocDomain"
                :areaName="`postscript-${item.id}`"
              />
            </div>
            <div>{{ getDateString(item.createDate) }}</div>
          </li>
        </ul>
      </div>
      <TextareaComment
        @close="isShowTextareaComment = false"
        v-if="isShowTextareaComment"
        :isPostscript="true"
        :isSetSecretLevel="!baseInfo.secretLevel.hidden"
        @addPostscript="
          (item) => {
            dataList.push(item);
            isShowTextareaComment = false;
          }
        "
        :placeholder="$i18n('collaboration.newcoll.fywbzyl')"
      />
    </a-spin>
  </div>
</template>
<script>
  //引入新增附言输入框
  import TextareaComment from '@/components/textarea-comment';
  //引入附件、关联列表集合
  import AccessoryList from '@/components/accessory-list';
  // 引入基础数据
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import { mapState } from 'pinia';
  import globalMethods from '@/plugins/methods';
  import api from '@/api';
  import {showBaseInfo} from "@/helper/people-card";

  export default {
    name: 'PostscriptArea',
    components: { TextareaComment, AccessoryList },
    props: {
      //转发传入的附言列表。纯展示。属于自由协同，先去掉
      // data: {
      //     type: Array,
      // },
      baseInfo: {
        type: Object,
      },
    },
    data() {
      return {
        //附言数据
        dataList: [],
        //是否展示新增附言输入框
        isShowTextareaComment: false,
        spinning: false,
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['print']),
    },
    created() {
      this.showBaseInfo = showBaseInfo;
      this.getDateString = globalMethods.getDateString;
      //如果有初始值，n那么就是转发协同中的纯展示。或者就是纯展示
      // if (this.data) {
      //     this.dataList = this.data;
      // } else {
      this.getData();
      // }
    },
    methods: {
      //获取数据
      async getData() {
        this.spinning = true;
        const { moduleId, moduleType } = this.baseInfo.zwIframe.mainbody;
        this.dataList = (
          await api.commentGetList({
            moduleId,
            affairId: this.baseInfo.businessData.affair.id,
            moduleType,
            queryType: 2,
          })
        ).commentData[0].comments;

        //更新打印数据
        this.print.postscriptData = this.dataList;
        this.spinning = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .postscript-area {
    .comment-list {
      > ul {
        min-height: 20px;
        margin-right: 13px;
        margin-left: 19px;
        background-color: #fff;

        > li {
          padding-top: 10px;
          padding-bottom: 15px;

          &:first-child {
            ~ li {
              border-top: $border;
            }
          }

          > div {
            &:last-child {
              margin-top: 10px;
              font-size: 12px;
              color: $c6;
            }
          }
        }
      }
    }

    .textarea-comment {
      padding-bottom: 20px;
      margin: 0 20px;
    }
  }
</style>
